<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>试卷列表</title>
</head>

<body>
<style type="text/css">
    html {
        background-color: #FFF
    }

    body {
        padding: 0;
        margin:0;
    }

    .layout-main {
        width: 1190px;
        margin-left: auto;
        margin-right: auto;
        font-family: '微软雅黑';
        overflow: hidden
    }

    .layout-l880 {
        float: left;
        width: 100%;
        background-color: #F0F0F0
    }

    .layout-r310 {
        float: right;
        width: 100%;
    }

    .ls-section {
        position: relative;
        border: 1px solid #ececec;
        font-family: '微软雅黑';
    }

    .ls-sec-head h2 {
        padding-left: 80px;
        font-size: 30px;
        font-style: normal;
        font-weight: normal;
    }

    .ls-sec-body {
        margin: 0 39px;
    }

    /* 可作为图片列表的规范性写法 .ls-sec-body 的宽度是780px */
    .ls-sec-body .img-ul {
        margin-right: -30px;
        overflow: hidden;
    }

    .ls-sec-body .img-ul .img-li {
        list-style: none
    }

    .ls-sec-body .img-ul .p1 {
        color: #666;
        font-size: 14px;
        line-height: 24px;
        margin-top: 10px;
        overflow: hidden;
        display: inline;
        width: 70%;
        text-overflow: ellipsis;
        margin-right: 15%;
    }

    #head {
        height: 120px;
        width: 100%;
        background-color: #66CCCC;
        text-align: center;
        position: relative;
    }

    .title {
        font-family: "宋体";
        color: #FFFFFF;
        position: inherit;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
        font-size: 36px;
        height: 40px;
        width: 30%;
    }

    #foot .copyright p {
        height: 24px;
        width: 100%;
    }

    #foot {
        width: 99%;
        height: 126px;
        background-color: #CC9933;
        position: absolute;
        overflow: hidden;
        bottom: 0;
    }

    .copyright {
        font-family: "宋体";
        color: #FFFFFF;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
        height: 60px;
        width: 40%;
        text-align: center;
    }

    .datec {
        width: 15%;
        display: inline-block;
        float: right;
    }
</style>
<div class="header" id="head">
    <div class="title">大数据学习系统</div>
    <span style="float: right;margin-right: 67px;">
        <ul style="width: 400px;">
            <li style="width: 30px; height: 30px;display: inline-block;"><img style="width: 100%; height: 100%;border-radius: 10px;" th:src="(${session.user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${session.user.avatar}"></li>
            <li style="width: 110px; height: 30px;display: inline-block;" th:text="'欢迎您，'+${session.user.userName}"></li>
            <li style="width: 50px; height: 30px;display: inline-block;"><a href="/webIndex" style="text-decoration: none;">去看课</a></li>
            <li style="width: 100px; height: 30px;display: inline-block;"><a href="logout" style="text-decoration: none;">退出</a></li>
        </ul>
    </span>
</div>
<div class="layout-main">
    <div class="layout-l880">
        <!-- 左侧 start -->
        <div class="ls-section">
            <div class="ls-sec-head">
                <h2>试卷列表</h2>
            </div>
            <div class="ls-sec-body">
                <ul class="img-ul">
                    <!--<li class="img-li"><a href="##"><p class="p1 p-a666">小记之八111111111111111</p><span class="datec">2018-11-22</span></a>
                    </li>-->
                </ul>
            </div>
        </div>
        <!-- 左侧 end -->
    </div>
    <div class="layout-r310">
        <!-- 右侧 start -->
        <!-- 右侧 end -->
    </div>
</div>
<div class="footer" id="foot">
    <div class="copyright">
        <div class="img">
            <span>联系邮箱：XXXXX@163.com</span>
        </div>

        <div class="img">
            <span>联系地址：XXXXXXXXXX</span>
        </div>

        <div class="img">
            <span>联系电话：XXXXXXXXXXXXXXXX</span>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script>
    var ctx = "/";
    /** 加载试卷列表 **/
    $(function() {
        $.post(ctx+"teach/exam/list",{},function(data){
            var res = data.rows;
            var datas = "";
            console.log(res);
            for(var i=0;i<res.length;i++) {
                var examId = res[i].eid;
                var name = res[i].ename;
                var createTime = res[i].createTime;
                //拼接数据
                datas += "<li class=\"img-li\"><a href=\""+ctx+"teach/exam/toExam/"+examId+"\"><p class=\"p1 p-a666\">" +
                    name +
                    "</p><span class=\"datec\">" +
                    createTime +
                    "</span></a>" +
                    "</li>";
            }
            $(".img-ul").html(datas);
        });
    });
</script>
</body>

</html>